<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详细</title>
    <link  href="../../hos_manage/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="../css/messages_doctor_mes.css">
    <link rel="stylesheet" href="../css/sweetalert.css" >
    <link rel="stylesheet" href="../css/pageCode.css" />

    <link rel="stylesheet" href="/css/project/show_project.css">
    <link href="http://cdn.bootcss.com/animate.css/2.1.1/animate.min.css" rel="stylesheet">
	<link href="http://cdn.gbtags.com/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">
	<link href="http://cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="http://cdn.bootcss.com/summernote/0.8.2/summernote.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/project/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/project/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/project/main.css"/>
    <link rel="stylesheet" href="/css/basic/basic.css">
    <!--[if lte IE 9]>
        <link rel="stylesheet" href="/css/basic/ie_basic.css">
    <![endif]-->
    <link rel="stylesheet" href="/css/project/user.css">
    <link rel="stylesheet" href="../css/public.css">
    
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
	<script src="/js/bootstrap-datetimepicker.min.js"></script>
	<script src="/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="http://cdn.bootcss.com/summernote/0.8.2/summernote.min.js"></script>
	<script src="http://cdn.bootcss.com/summernote/0.7.1/lang/summernote-zh-CN.min.js"></script>
</head>
<body>
    <%@ include file="../header.jsp"%>
    <!--内容-->
    <div class="containerone">
    <%@ include file="../left_menu.jsp"%>
        <!--右边内容-->
        <div class="right_cont">
        <!--右边导航下面内容-->
            <div class="message_hos_news_container" id="project_show">
        		<div class="content">
        			<div class="project-show-head strong">
        				<span class="js_back" @click="back()">
        					<span>返回</span>
        				</span>
                        <span class="middle">查看</span>
                        <watch></watch>
        				<div class="tag">
        					<tag></tag>
        				</div>
        			</div>
        			<div class="project-show-body">
        				<div class="project-show-row">
        					<hospital></hospital>
        					<span class='strong name'>所属医院</span>
        					<div class="select">
        						<div class="select-show" v-html="data.hospital_name"></div>
        					</div>
        				</div>
        				<div class="project-show-row">
        					<project></project>
        					<span class='strong name'>项目名称</span>
        					<input class="project-show-input" v-model="data.item_name" disabled>

        				</div>
        				<div class="project-show-row">
        					<principal></principal>
        					<span class='strong name'>主要负责人</span>
        					<div class="select">
        						<div class="select-show" v-html="data.principal"></div>
        					</div>
        				</div>
        				<div class="project-show-row">
        					<type></type>
        					<span class='strong name'>版本类型</span>
        					<div class="select">
        						<div class="select-show">
        							<div class="select-each" v-for="row in data.version_type.split(',')">
        								<span class="select-span" v-html="row"></span>
        							</div>
        						</div>
        					</div>
        				</div>
        				<div class="project-show-row">
        					<type></type>
        					<span class='strong name'>项目类型</span>
        					<div class="select">
        						<div class="select-show">
        							<div class="select-each" v-for="row in data.item_type.split(',')">
        								<span class="select-span" v-html="row"></span>
        							</div>
        						</div>
        					</div>
        				</div>
        				<div class="project-show-row">
        					<saler></saler>
        					<span class='strong name'>销售负责人</span>
        					<div class="select">
        						<div class="select-show" v-html="data.sale_leader"></div>
        					</div>
        				</div>
        				<div class="project-show-row">
        					<custom></custom>
        					<span class='strong name'>备注</span>
        					<input class="project-show-input" v-model="data.remark" disabled>
        				</div>
        				<div class="project-show-row">
        					<time></time>
        					<span class='strong name'>起始时间</span>
        					<div class="time-content">
        						<div class="time-show" v-html="data.start_time"></div><div class="start-to-end">至</div><div class="time-show" v-html="data.end_time"></div>
        					</div>
        				</div>
        				<div class="project-show-row textarea-name">
        					<descript></descript>
        					<span class='strong name'>项目描述</span>
        					<div id="editor" @click="contentDetails()" v-html="decode(data.description)"></div>
        				</div>
        			</div>
                    <span class="href" @click="edit()">
                        <%
                            if (checkAuth("编辑项目", input)) {
                        %>
                        <div class="submit">编辑</div>
                        <%
                            }
                        %>
                    </span>
        		</div>
        		<div class="shade" v-show='thumb' @click="shrink()">
        		</div>
        		<img class="img-detail" v-show='thumb' :src="imgDetail" style="transform:translateY(-50%)">
        	</div>
        </div>
    </div>
    <script src="/js/sweetalert-dev.js"></script>
    <%@ include file="/svg/add.jsp"%>
	<%@ include file="/svg/necessary.jsp"%>
	<%@ include file="/svg/name.jsp"%>
	<%@ include file="/svg/time.jsp"%>
    <%@ include file="/svg/watch.jsp"%>
    <%@ include file="/svg/tag_svg.jsp"%>
	<%@ include file="/svg/hospital.jsp"%>
	<%@ include file="/svg/project.jsp"%>
	<%@ include file="/svg/principal.jsp"%>
	<%@ include file="/svg/type.jsp"%>
	<%@ include file="/svg/designer.jsp"%>
	<%@ include file="/svg/data.jsp"%>]
	<%@ include file="/svg/app.jsp"%>
	<%@ include file="/svg/saler.jsp"%>
	<%@ include file="/svg/sale_leader.jsp"%>
	<%@ include file="/svg/custom.jsp"%>
	<%@ include file="/svg/descript.jsp"%>
	<%@ include file="/svg/number.jsp"%>
    <script type="text/javascript">
        new Vue({
            el: "#project_show",
            data: function() {
    			return {
    				data: {},
    				thumb: false,
    				imgDetail: "",
    				imgScale: 1,
    				scaleStant: 1.2,
    			}
    		},
    		methods: {
                edit: function() {
                    locationHerf("edit", {
                        data: this.data,
                    });
                    event.stopPropagation();
                },
                decode: function(i) {
                    return decodeURI(i).replace(/(<img.*?width:).*?(;.*?>)/g, "$125%$2");
                },
    			back: function() {
    				locationHerf("projects");
    			},
    			imgEnlarge: function(event) {
    				var event = event || window.event;
    				if (event.deltaY < 0 && this.imgScale > .3) {
    					this.imgScale = this.imgScale / this.scaleStant;
    				} else if (event.deltaY > 0 && this.imgScale < 2) {
    					this.imgScale = this.imgScale * this.scaleStant;
    				}
    				this.imgDom.style.transform = "translateY(-50%) scale(" + this.imgScale + ")";
    				this.imgDom.style.webkitTransform = "translateY(-50%) scale(" + this.imgScale + ")";
    			},
    			enlarge: function(target) {
    				this.thumb = true;
    				this.imgDetail = target.src;
    				var self = this;
    				window.addEventListener("mousewheel", self.imgEnlarge);
    				this.imgDom = this.imgDom || document.querySelector(".img-detail");
    			},
    			shrink: function() {
    				this.thumb = false;
    				this.imgScale = 1;
    				this.imgDom.style.transform = "translateY(-50%) scale(" + this.imgScale + ")";
    				this.imgDom.style.webkitTransform = "translateY(-50%) scale(" + this.imgScale + ")";
    			},
    			contentDetails: function() {
    				var target = window.event.target;
    				if (target.tagName == "IMG") {
    					this.enlarge(target);
    				}
    			},
    		},
    		ready: function() {
    			this.data = getHrefParms("detail").data;
    		},
            components: {
                addsvg: {template: "#add"},
                necessary: {template: "#necessary"},
            	name: {template: "#name"},
            	tag: {template: "#tag"},
            	time: {template: "#time"},
            	hospital: {template: "#hospital"},
            	project: {template: "#project"},
            	principal: {template: "#principal"},
            	type: {template: "#type"},
            	designer: {template: "#designer"},
            	data: {template: "#data"},
            	app: {template: "#app"},
            	saler: {template: "#saler"},
            	saleleader: {template: "#sale_leader"},
            	custom: {template: "#custom"},
            	descript: {template: "#descript"},
            	number: {template: "#number"},
                watch: {template: "#watch"},
            }
        });
    </script>
</body>
</html>
